<!-- 微信号填写弹窗组件 -->
<template>
  <view class="wechat-popup-overlay" v-if="show" @click="onClickOverlay">
    <view class="wechat-popup-content" @click.stop>
      <!-- 头部 -->
      <view class="wechat-popup-header">
        <view class="header-icon">
          <text class="tn-icon-wechat-fill"></text>
        </view>
        <view class="header-title">{{hasWechat ? '确认添加微信' : '填写微信号'}}</view>
      </view>
      
      <!-- 内容区 -->
      <view class="wechat-popup-body">
        <text class="popup-desc">{{hasWechat ? '确认同意对方添加您的微信吗？' : '请填写您的微信号，同意后对方可查看'}}</text>
        
        <!-- 输入框 - 仅在未填写微信号时显示 -->
        <view v-if="!hasWechat" class="wechat-input-container">
          <input
            class="wechat-input"
            v-model="wechatValue"
            placeholder="请输入您的微信号"
            placeholder-class="placeholder"
            focus
          />
        </view>
        
        <!-- 已有微信号时显示 -->
        <view v-else class="wechat-display">
          <text class="wechat-value">{{existingWechat}}</text>
        </view>
        
        <!-- 错误提示 -->
        <text v-if="errorMessage" class="error-message">{{errorMessage}}</text>
      </view>
      
      <!-- 底部按钮 -->
      <view class="wechat-popup-footer">
        <view class="footer-button cancel" @click="onCancel">
          <text>取消</text>
        </view>
        <view class="footer-button confirm" @click="onConfirm">
          <text>确认</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WechatPopup',
  props: {
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // 已有的微信号
    existingWechat: {
      type: String,
      default: ''
    },
    // 消息ID
    messageId: {
      type: String | Number,
      default: ''
    },
    // 目标用户ID
    targetId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      wechatValue: '',  // 用户输入的微信号
      errorMessage: ''  // 错误信息
    }
  },
  computed: {
    // 是否已有微信号
    hasWechat() {
      return this.existingWechat && this.existingWechat.trim().length > 0;
    }
  },
  methods: {
    // 点击蒙层
    onClickOverlay() {
      // 点击蒙层不关闭，可以通过设置参数来控制是否允许点击蒙层关闭
      // this.$emit('update:show', false);
    },
    
    // 点击取消
    onCancel() {
      this.wechatValue = '';
      this.errorMessage = '';
      this.$emit('update:show', false);
      this.$emit('cancel');
    },
    
    // 点击确认
    onConfirm() {
      // 使用已有微信号或用户输入的微信号
      const wechat = this.hasWechat ? this.existingWechat : this.wechatValue.trim();
      
      // 验证微信号是否为空
      if (!wechat) {
        this.errorMessage = '请输入您的微信号';
        return;
      }
      
      // 清空错误信息
      this.errorMessage = '';
      
      // 发出确认事件
      this.$emit('confirm', {
        messageId: this.messageId,
        wechat: wechat,
        targetId: this.targetId
      });
      
      // 关闭弹窗
      this.$emit('update:show', false);
      
      // 清空输入
      this.wechatValue = '';
    }
  }
}
</script>

<style lang="scss">
.wechat-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(4px);
}

.wechat-popup-content {
  width: 80%;
  max-width: 600rpx;
  background: #1E1E1E;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 0 20rpx rgba(179, 247, 60, 0.3);
  border: 1px solid rgba(179, 247, 60, 0.15);
  animation: popup-in 0.3s ease-out;
}

@keyframes popup-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wechat-popup-header {
  padding: 30rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-icon {
  margin-bottom: 16rpx;
}

.header-icon text {
  font-size: 70rpx;
  color: #B3F73C;
  text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.5);
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #FFFFFF;
}

.wechat-popup-body {
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-desc {
  font-size: 28rpx;
  color: #CCCCCC;
  text-align: center;
  margin-bottom: 30rpx;
}

.wechat-input-container {
  width: 100%;
  height: 80rpx;
  background: #333333;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wechat-input {
  width: 100%;
  height: 100%;
  font-size: 30rpx;
  color: #FFFFFF;
}

.placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.wechat-display {
  width: 100%;
  height: 80rpx;
  background: #333333;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wechat-value {
  font-size: 30rpx;
  color: #B3F73C;
  font-weight: bold;
}

.error-message {
  font-size: 24rpx;
  color: #FF4D4F;
  align-self: flex-start;
  margin-top: 6rpx;
}

.wechat-popup-footer {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-button {
  flex: 1;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
}

.footer-button.cancel {
  color: #999999;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-button.cancel:active {
  background-color: rgba(255, 255, 255, 0.05);
}

.footer-button.confirm {
  color: #B3F73C;
  font-weight: bold;
}

.footer-button.confirm:active {
  background-color: rgba(179, 247, 60, 0.1);
}
</style> 